<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login" @keydown.enter="handleSubmit">
    <div class="login-con" style="opacity: 0.5;background-color: white;border-radius: 8px;"></div>
    <div class="login-con">
      <div style="margin: 0 auto;padding: 10px;">
        <div style="width:100%;margin-top: 20px;">
          <h2 style="width:150px;font-weight: 500;margin: 0 auto;">欢迎登录</h2>
        </div>
        <el-form ref="user" v-model="user" :model="user" :rules="rules" label-width="80px"
                 style="width: 90%;margin-top: 20px;padding-top: 20px;">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="user.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">登录</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        user: {
          userName: '',
          password: ''
        },
        rules: {
          userName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      handleSubmit () {
        let self = this
        self.$refs['user'].validate((valid) => {
          if (valid) {
            self.http.post('user/login', self.user)
              .then((response) => {
                let responseData = response.data
                console.log('login request success', responseData)
                if (responseData.flag === this.EXECUTE_OK) {
                  self.$message({
                    message: '登录成功！',
                    type: 'success'
                  });
                  self.$store.commit('login', self.user)
                  self.$router.push({
                    name: 'main_app'
                  });
                } else {
                  self.$message.error('登录失败，' + responseData.message);
                }
              })
              .catch(function (response) {
                self.$message.error('登录异常，请联系程序员小哥排查');
              })
          } else {
            return false
          }
        });
      }
    }
  };
</script>

<style>

</style>
